// 封装消息提示弹出框方法

// <SealMessage type="error">登录失败</SealMessage>
// 约定参数是一个对象：{type:xxxx,content:xxxx}

import { h, render } from "vue";
import SealMessage from "./message.vue";

type ParamsType = {
  type: "error" | "success" | "warning";
  content: string;
  duration?: number;
};

const div = document.createElement("div");
div.setAttribute("class", "seal-message-container");
document.body.appendChild(div);

function Message({ type, content, duration = 3000 }: ParamsType) {
  const vnode = h(SealMessage, { type: type }, content);
  render(vnode, div);

  //   元素或组件销毁
  setTimeout(() => {
    render(null, div);
  }, duration);
}

Message.success = (content: string, duration = 3000) => {
  Message({
    type: "success",
    content,
    duration,
  });
};

Message.error = (content: string, duration = 3000) => {
  Message({
    type: "error",
    content,
    duration,
  });
};

Message.warning = (content: string, duration = 3000) => {
  Message({
    type: "warning",
    content,
    duration,
  });
};

export default Message;
